<!--
 * @Date: 2019-07-24 19:30:04
 * @LastEditors: wangsh
 * @Author: wangsh
 -->
<template>
  <ms-dialog :title="title" :dialog-visible="dialogVisible" @show="showDialog" @ok="handleSaveForm" @close="handleCloseDialog">
    <el-form v-loading="loading" ref="formValid" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="菜单类型" prop="type">
        <el-radio-group v-model="form.type" size="mini" style="width: 178px">
          <el-radio-button label="0">目录</el-radio-button>
          <el-radio-button label="1">菜单</el-radio-button>
          <el-radio-button label="2">按钮</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-row type="flex" justify="space-between">
        <el-col :span=10>
          <el-form-item prop="menuName" :label="(form.type == '2' ? '按钮' : '菜单') + '名称'">
            <el-input v-model="form.menuName" />
          </el-form-item>
        </el-col>
        <el-col :span=12>
          <el-form-item label="上级菜单" prop="parentId">
            <menu-tree v-model="form.parentId" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex"  justify="space-between">
        <el-col v-if="form.type != '2'" :span=10>
          <el-form-item label="组件地址">
            <el-input v-model="form.routerName" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.type != '0'" :span=10>
          <el-form-item label="权限标识">
            <el-input v-model="form.roleMark" />
          </el-form-item>
        </el-col>
        <el-col :span=12>
          <el-form-item label="排序">
            <el-input v-model="form.menuOrder" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="form.type != '2'" type="flex" justify="space-between">
        <el-col :span=10>
          <el-form-item label="图标">
            <el-input v-model="form.icon" />
          </el-form-item>
        </el-col>
        <el-col :span=12>
          <el-form-item label="路由地址" >
            <el-input v-model="form.url" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </ms-dialog>
</template>

<script>
import MsDialog from '@/common/dialog'
import { MenuTree } from '@/common/service'
import tip from '@/mixins/tip'
const prefixUrl = '/sys/menu/'
export default {
  components: {
    MsDialog,
    MenuTree
  },
  mixins: [tip],
  data() {
    return {
      apiUrl: {
        get: `${prefixUrl}getMenuById`,
        save: `${prefixUrl}saveMenu`
      },
      rules: {
        type: [
          { required: true, message: '请选择菜单类型', trigger: 'blur' }
        ],
        menuName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        parentId: [
          { required: true, message: '请选择父级菜单', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>
